<template>
  <div id="course_list">

<!--      <el-select v-model="nameTabValue" placeholder="请选择名称" @change="findTableList()">-->
<!--        <el-option v-for="item in nameTabList"-->
<!--                   :key="item.value"-->
<!--                   :label="item.label"-->
<!--                   :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
    <el-select v-model="courseTypeValue" placeholder="请选择科目" @change="findTableList()">
      <el-option v-for="item in courseList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>

    <el-select v-model="studentIdValue" placeholder="请选择学生" @change="findTableList()">
      <el-option v-for="item in studentList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>


      <!--      <span class="demonstration">日期 </span>-->
      <el-date-picker
        v-model="startDate"
        type="date"
        @change="findTableList()"
        value-format="yyyy-MM-dd"
        placeholder="选择日期">
      </el-date-picker>

    <el-table :data="courseShowDataList" style="width: 100%" >
      <el-table-column prop="stage" :label="tableLabel[0].label" width="140"> </el-table-column>

      <el-table-column :label="tableLabel[1].label">
        <el-table-column prop="data1.id" :label="tableLabel[1].label2">
          <div slot-scope="scope" :style="scope.row.data1.backgroundColor"
               @click="handClick(scope.row.data1,scope.row.stage,scope.row.slotCode,tableLabel[1].label2)">

            <span v-if="scope.row.data1.courseRecordShowDataList!=null">
              <p v-show="scope.row.data1.count!=null&&scope.row.data1.count>2">{{ scope.row.data1.count }}对</p>
              <p v-for="student in scope.row.data1.courseRecordShowDataList" :style="student.fontColor">
              {{student.courseName}}:{{ student.studentName }}{{student.remarks}}
            </p>
            </span>
            <span v-else>  &nbsp; </span>

          </div>
        </el-table-column>
      </el-table-column>

      <el-table-column :label="tableLabel[2].label">
        <el-table-column prop="data2.id" :label="tableLabel[2].label2">
          <div slot-scope="scope" :style="scope.row.data2.backgroundColor"
               @click="handClick(scope.row.data2,scope.row.stage,scope.row.slotCode,tableLabel[2].label2)">
<!--            &nbsp;{{scope.row.data2.content}}-->

            <span v-if="scope.row.data2.courseRecordShowDataList!=null">
              <p v-show="scope.row.data2.count!=null&&scope.row.data2.count>2">{{ scope.row.data2.count }}对</p>
              <p v-for="student in scope.row.data2.courseRecordShowDataList" :style="student.fontColor">
              {{student.courseName}}:{{ student.studentName }}{{student.remarks}}
            </p>
            </span>
            <span v-else>  &nbsp; </span>

          </div>
        </el-table-column>
      </el-table-column>

      <el-table-column :label="tableLabel[3].label">
        <el-table-column prop="data3.id" :label="tableLabel[3].label2">
          <div slot-scope="scope" :style="scope.row.data3.backgroundColor"
               @click="handClick(scope.row.data3,scope.row.stage,scope.row.slotCode,tableLabel[3].label2)">
<!--            &nbsp;{{scope.row.data3.content}}-->
            <span v-if="scope.row.data3.courseRecordShowDataList!=null">
              <p v-show="scope.row.data3.count!=null&&scope.row.data3.count>2">{{ scope.row.data3.count }}对</p>
              <p v-for="student in scope.row.data3.courseRecordShowDataList" :style="student.fontColor">
              {{student.courseName}}:{{ student.studentName }}{{student.remarks}}
            </p>
            </span>
            <span v-else>  &nbsp; </span>

          </div>


        </el-table-column>
      </el-table-column>

      <el-table-column :label="tableLabel[4].label">
        <el-table-column prop="data4.id" :label="tableLabel[4].label2">
          <div slot-scope="scope" :style="scope.row.data4.backgroundColor"
               @click="handClick(scope.row.data4,scope.row.stage,scope.row.slotCode,tableLabel[4].label2)">
<!--            &nbsp;{{scope.row.data4.content}}-->
            <span v-if="scope.row.data4.courseRecordShowDataList!=null">
              <p v-show="scope.row.data4.count!=null&&scope.row.data4.count>2">{{ scope.row.data4.count }}对</p>
              <p v-for="student in scope.row.data4.courseRecordShowDataList" :style="student.fontColor">
              {{student.courseName}}:{{ student.studentName }}{{student.remarks}}
            </p>
            </span>
            <span v-else>  &nbsp; </span>
          </div>
        </el-table-column>
      </el-table-column>

      <el-table-column :label="tableLabel[5].label">
        <el-table-column prop="data5.id" :label="tableLabel[5].label2">
          <div slot-scope="scope" :style="scope.row.data5.backgroundColor"
               @click="handClick(scope.row.data5,scope.row.stage,scope.row.slotCode,tableLabel[5].label2)">
<!--            &nbsp;{{scope.row.data5.content}}-->
            <span v-if="scope.row.data5.courseRecordShowDataList!=null">
              <p v-show="scope.row.data5.count!=null&&scope.row.data5.count>2">{{ scope.row.data5.count }}对</p>
              <p v-for="student in scope.row.data5.courseRecordShowDataList" :style="student.fontColor">
              {{student.courseName}}:{{ student.studentName }}{{student.remarks}}
            </p>
            </span>
            <span v-else>  &nbsp; </span>

          </div>
        </el-table-column>
      </el-table-column>

      <el-table-column :label="tableLabel[6].label">
        <el-table-column prop="data6.id" :label="tableLabel[6].label2">
          <div slot-scope="scope" :style="scope.row.data6.backgroundColor"
               @click="handClick(scope.row.data6,scope.row.stage,scope.row.slotCode,tableLabel[6].label2)">
<!--            &nbsp;{{scope.row.data6.content}}-->
            <span v-if="scope.row.data6.courseRecordShowDataList!=null">
              <p v-show="scope.row.data6.count!=null&&scope.row.data6.count>2">{{ scope.row.data6.count }}对</p>
              <p v-for="student in scope.row.data6.courseRecordShowDataList" :style="student.fontColor">
              {{student.courseName}}:{{ student.studentName }}{{student.remarks}}
            </p>
            </span>
            <span v-else>  &nbsp; </span>

          </div>
        </el-table-column>
      </el-table-column>

      <el-table-column :label="tableLabel[7].label">
        <el-table-column prop="data7.id" :label="tableLabel[7].label2">
          <div slot-scope="scope" :style="scope.row.data7.backgroundColor"
               @click="handClick(scope.row.data7,scope.row.stage,scope.row.slotCode,tableLabel[7].label2)">
<!--            &nbsp;{{scope.row.data7.content}}-->
            <span v-if="scope.row.data7.courseRecordShowDataList!=null">
              <p v-show="scope.row.data7.count!=null&&scope.row.data7.count>2">{{ scope.row.data7.count }}对</p>
              <p v-for="student in scope.row.data7.courseRecordShowDataList" :style="student.fontColor">
              {{student.courseName}}:{{ student.studentName }}{{student.remarks}}
            </p>
            </span>
            <span v-else>  &nbsp; </span>

          </div>
        </el-table-column>
      </el-table-column>
    </el-table>


  </div>

</template>

<script>
   import Bus from './bus.js';
   import ElementUI from "element-ui";

    export default {
        name: "course_list",
      //url地址
      // props: {
      //   sendUrl :{type :String,require: true}
      // },
        data() {
          return{
            //日期
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              }
            },
            startDate:'',
            //表格数据
            courseShowDataList:[],
            // nameTab选择下拉框
            // nameTabList: [
            //   {
            //     value: '',
            //     label: '全部'
            //   }
            // ],
            // nameTabValue:"",
            //学生选择框
            studentList: [
              {
                value: '',
                label: '全部'
              }
            ],
            studentIdValue: '',
            //课程选择框
            courseList: [
              {
                value: '',
                label: '全部'
              }
            ],
            courseTypeValue: '',

            //颜色选择下拉框
            colorList: [
              {
                value: '',
                label: '无'
              },
              {
                value: 'background-color: #fbfdff',
                label: '白色'
              }, {
                value: 'background-color: #fbc4c4',
                label: '粉色'
              },{
                value: 'background-color: #f78989',
                label: '红色'
              }, {
                value: 'background-color: #5daf34',
                label: '绿色'
              }, {
                value: 'background-color: #409eff',
                label: '蓝色'
              }, {
                value: 'background-color: #82848a',
                label: '灰色'
              }, {
                value: 'background-color: #cf9236',
                label: '黄色'
              },{
                value: 'background-color: mediumorchid',
                label: '紫色'
              }],
            //表头数据
            tableLabel: [
              {
                label: "时间段/日期 ",
                label2: "",
              },
              {
                label: "星期一",
                label2: "2022-01-01 ",
              },
              {
                label: "星期二",
                label2: "2022-01-02",
              },
              {
                label: "星期三",
                label2: "2022-01-02",
              },{
                label: "星期四",
                label2: "2022-01-02",
              },{
                label: "星期五",
                label2: "2022-01-02",
              },{
                label: "星期六",
                label2: "2022-01-02",
              },{
                label: "星期日",
                label2: "2022-01-02",
              }
            ],

          }
        },
      methods :{
        //查询列表
        findTableList (){
          //清空数据
          this.courseShowDataList = [];
          //筛选学生
          let studentIdValue = this.studentIdValue;
          //筛选课程
          let courseTypeValue = this.courseTypeValue;
           //日期筛选数据
          let startDate = this.startDate;
          if(startDate ==null){
            startDate = ''
          }
          const param = {studentId:studentIdValue,courseType:courseTypeValue,startDate:startDate}
          this.$store.dispatch("course/getListPageData", param).then((res) => {
            // console.log("============2 " + JSON.stringify(this.wordModuleListData))
            const dataValue = res.data;
            if(dataValue==null){
              return;
            }
            const dateAndWeekList = dataValue.dateAndWeekList;
            if(dateAndWeekList!=null){
              //遍历数组 并更新头部数据
              for (let index=0; index < dateAndWeekList.length; index++) {
                const entity = dateAndWeekList[index];
                this.tableLabel[index+1].label = entity.weekShow;//周几
                this.tableLabel[index+1].label2 = entity.dateStr;//日期
              }

              var courseShowDataList = dataValue.courseShowDataList;
              //如果有数据 设置数据
              if(courseShowDataList!=null&&courseShowDataList[0].data1!=null){
                this.courseShowDataList = courseShowDataList;
              }
            }
            if(this.startDate==null||this.startDate==''){
              this.startDate = dataValue.startDate;
            }

          }).catch((e) => {
            console.log(e)
          });

        },

        //拿到一个单元格的数据给父组件
        handClick (data,stage,slotCode,dayStr){
          //找到父组件的父组件的方法  子组件 ===》父组件
          this.$emit("courseDetailFromAction",data,stage,slotCode,dayStr);
        },
        //查询课程列表
        selectCourseType () {
          const param = {dictType:'course_type'}
          this.$store.dispatch("dist/selectDistType", param).then((res) => {
            // console.log("============2 " + JSON.stringify(this.wordModuleListData))
            // const courseList = this.$store.state.dist.courseList
            if (res != null) {
              this.courseList = []
              this.courseList = res
            }
          }).catch((e) => {
            console.log(e)
          });

        },
        // 查询学生列表
        selectStudentList () {
          this.$store.dispatch("dist/selectStudentList").then((res) => {
            // console.log("============2 " + JSON.stringify(this.wordModuleListData))
            // const studentList = this.$store.state.dist.studentList
            if (res != null) {
              this.studentList = []
              this.studentList = res
            }
          }).catch((e) => {
            console.log(e)
          });
        },

        refreshListAction(){
          this.findTableList();//表格数据内容
          this.selectCourseType();//筛选课程列表
          this.selectStudentList();//筛选学生列表
        },

      },
      created() {
        this.refreshListAction();
        //在更新数据的时候，更新完成后执行刷新数据
        Bus.$off('toCourseRefreshListAction');//防止出现多次调用，在执行的时候需要卸掉
        Bus.$on('toCourseRefreshListAction', data => {
          this.findTableList();//表格数据内容
        });

        Bus.$off('toCourseListRefreshStudentListAction');//防止出现多次调用，在执行的时候需要卸掉
        Bus.$on('toCourseListRefreshStudentListAction', data => {
          this.selectStudentList();//筛选学生列表
          //刷新学生列表
          this.$nextTick(function () {
            // 筛选学生列表
            Bus.$emit('toCourseTableRefreshStudentListAction','刷新列表');
          });

        });


        //点击按钮刷新数据
        Bus.$off('toCourseListRefreshCourseAction');//防止出现多次调用，在执行的时候需要卸掉
        Bus.$on('toCourseListRefreshCourseAction', data => {
          this.refreshListAction();
        });


      }
     }

</script>

<style scoped>
</style>
